<!--甘特图时间头的一块块-->
<template>
  <div class="gantt-time-block">
    <div class="top">{{ targetTime }}</div>
    <div class="bottom">
      <!-- 24小时 -->
      <div class="day-item" 
      :style="{
        'width': `${ganttHeadHourWidth * scaleWidth}px`
      }"
      v-for="(index) in 24" :key="index">
        <div class="text">  {{ index === 1? '': index - 1 }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>

// 甘特图顶上一小时的宽度  为了保持1px 等于1分钟 所以取值60px --gantt-head-hour-width
const ganttHeadHourWidth = 60


const props = defineProps({
  targetTime: {
    type: String,
    default: '',
  },
  scaleWidth: {
    type: Number,
    default: 1,
  }
})

</script>

<style scoped lang="scss">
  @use "sass:math";
  .gantt-time-block {
    box-sizing: border-box;
    font-size: 12px;
    
     .top {
        box-sizing: border-box;
        border-bottom: 1px solid $tableBorderColor;
        border-left: 1px solid $tableBorderColor;
        text-align: center;
        // 60 ÷ 2 = 30
        height: math.div($tableHeadHeight , 2);  // $tableHeadHeight / 2
        line-height: math.div($tableHeadHeight , 2);
      }
     .bottom {
        display: flex;
        .day-item {
          //因为180 ÷ 3 = 60
          line-height: math.div($tableHeadHeight , 2);
          height: math.div($tableHeadHeight , 2);
          border-bottom: 1px solid $tableBorderColor;
          .text {
            margin-left: -6px;
          }
          &:first-child {
            box-sizing: border-box;
            border-left: 1px solid $tableBorderColor;
          }
        }
      }
  }
</style>
